<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清算</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
        }

        body div div {
            margin-top: 1px;
        }

        body div div button {
            width: 50px; /* 按钮宽度 */
            height: 50px; /* 按钮高度 */
            background-size: cover; /* 自适应填充按钮 */
            background-position: center; /* 图片居中显示 */
            background-repeat: no-repeat; /* 不重复背景图片 */
            padding: 20px; /* 按钮内边距，根据需要调整 */
            border: none; /* 去掉边框 */
            cursor: pointer; /* 鼠标悬停时显示手型光标 */
            border-radius: 10px;
        }

        body div div div {
            display: flow;
            color: yellow;
        }

        body {
            background-color: #184A5E;
        }

        .c1 {
            width: 380px;
            background: url() repeat-y;
            border-radius: 10px;
            display: flex;
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
            height: 300px; /* 或者根据需要设置高度 */
        }

        .c2 {
            width: 380px;
            background: url() repeat-y;
            border-radius: 10px;
            display: flex;
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
            height: 80px; /* 或者根据需要设置高度 */
        }

        .c3 {
            display: flex;
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
            height: 40px;
            margin-left: -15px;
            margin-top: -5px;
        }

        .c4 {
            color: #ffffff;
            display: flex;
            justify-content: flex-start; /* 左对齐 */
            width: 360px;
        }

        .c5 {
            width: 65px;
            height: 80px;
            margin-top: 15px;
        }
        .c5 button{
            border: white 1px solid;
        }

        .c6 {
            margin-left: 15px;
        }

        body div h3 {
            color: white;
            margin: 5px;
        }

        body h2 {
            color: white;
        }


        .divider {
            color: grey;
        }

        /* 总价部分样式调整 */
        #totalDisplay {
            text-align: center;
            margin-top: 20px;
        }
        .c7{
            color: #ffffff;
            margin-top: 20px;
        }
        .c8{
            margin-top: 0px;
            margin-left: 20px;
            margin-right: 20px;
            background-color: #920933;
            color: #fff;
            border: 1px solid #590821;
        }
    </style>
    <script>
        var allCount = 0; // 总商品量
        var allPrice = 0; // 总价
        var counts = new Array(20).fill(0); // 合计数组，初始化为0，长度为10
        var isInit = false;
        var datas = [];
        var formattedDate = "";
        var currentDate = "";

        function addProduct(index,p) {
            allCount++;
            counts[index]++;
            allPrice = allPrice + Number(p);
            allPrice = parseFloat(allPrice.toFixed(1));
            const itemsText = document.getElementById(`count` + index);
            itemsText.textContent = counts[index];
            const allCounts = document.getElementById(`items`);
            allCounts.textContent = "当日总个数：" + allCount + " 个";
            let allPriceDiv = document.getElementById(`allPrice`);
            allPriceDiv.textContent = "当日总收益：" + allPrice + " 万";
            let dateStr = document.getElementById("date").innerHTML;
            var todayData = {"counts":counts,"allPrice":allPrice,"allCount":allCount};
            localStorage.setItem("car"+dateStr,JSON.stringify(todayData));
        }
        function init() {

            if(!isInit){
                for (let i = 0; i < localStorage.length; i++) {
                    const key = localStorage.key(i);
                    if(key.indexOf("car")==0)
                    datas.push(key.substring(3,13));
                }
                datas.sort((a, b) => a.localeCompare(b));
                isInit = true;
                //第一次打开页面，初始化为当前日期减一的数据
                let date = new Date();
                let year = date.getFullYear();
                let month = ("0" + (date.getMonth() + 1)).slice(-2);
                let day = ("0" + date.getDate()).slice(-2) - 1;
                day = day < 10? `0${day}` : `${day}`;
                formattedDate = year + "-" + month + "-" + day;
                currentDate = year + "-" + month + "-" + day;
            }

            document.getElementById("date").innerHTML = formattedDate;
            var todayData = JSON.parse(localStorage.getItem("car"+formattedDate));
            const allCounts1 = document.getElementById(`items`);
            const allPrice1 = document.getElementById(`allPrice`);
            if(todayData != null){
                allCount = todayData.allCount
                allPrice = todayData.allPrice;
                counts = todayData.counts;
                allCounts1.innerHTML = "当日总个数：" + allCount + " 个";
                allPrice1.innerHTML = "当日总收益：" + allPrice + " 万";
                for (let i = 0; i < 20; i++) {
                    const itemsText = document.getElementById(`count` + i);
                    if(itemsText != null)
                    itemsText.innerHTML = counts[i];
                }
            }else{
                allCount = 0;
                allPrice = 0;
                allCounts1.innerHTML = "当日总个数：" + allCount + " 个";
                allPrice1.innerHTML = "当日总收益：" + allPrice + " 万";
                for (let i = 0; i < 20; i++) {
                    const itemsText = document.getElementById(`count` + i);
                    if(itemsText != null)
                    itemsText.innerHTML = 0;
                }
            }
        }
        window.onload = init;
        function lastDay() {
            if(datas.indexOf(formattedDate)==-1){
                //前一天的数据还没保存
                formattedDate = datas[datas.length-1];
            }else{
                var idx =datas.indexOf(formattedDate);
                if(idx==0){
                    return;
                }
                formattedDate = datas[idx-1];
            }
            init()
        }

        function nextDay() {
            if(datas.indexOf(formattedDate)==-1){
                //前一天的数据还没保存
                return;
            }else{
                var idx =datas.indexOf(formattedDate);
                formattedDate = datas[idx+1];
                if(idx==datas.length-1){
                    formattedDate = currentDate;
                }
            }
            init()
        }

    </script>
</head>
<body>
<h2>清算结果</h2>
<table>
    <tr>
        <td><button class="c8" id="lastDay" onclick="lastDay()">前一天</button></td>
        <td><h3 class="c7" id="date"></h3></td>
        <td><button class="c8" id="nextDay" onclick="nextDay()">后一天</button></td>
    </tr>
</table>



<div class="c4"></div>
<div id='product' class="c1">

    <table class="c6">
        <tr>
            <td>
                <div class="c5">
                    <button style="background-image: url(''); "
                            onclick="addProduct(1,20.5)" title="60武器"></button>
                    <div class="c3" id="count1">0</div>
                </div>
            </td>
            <td>
                <div class="c5">
                    <button style="background-image: url(''); "
                            onclick="addProduct(2,19)" title="60装备"></button>
                    <div class="c3" id="count2">0</div>
                </div>
            </td>

            <td>
            <div class="c5">
                    <button style="background-image: url(''); "
                    onclick="addProduct(3,8)" title="70武器"></button>
                    <div class="c3" id="count3">0</div>
                </div>
            </td>

            <td>
            <div class="c5">
                    <button style="background-image: url(''); "
                    onclick="addProduct(4,7)" title="70装备"></button>
                    <div class="c3" id="count4">0</div>
                </div>
            </td>
            <td>
                <div class="c5">
                    <button style="background-image: url(''); "
                            onclick="addProduct(5,57)" title="80武器"></button>
                    <div class="c3" id="count5">0</div>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div class="c5">
                    <button style="background-image: url(''); "
                            onclick="addProduct(6,42)" title="感知卡"></button>
                    <div class="c3" id="count6">0</div>
                </div>
            </td>
            <td>
                <div class="c5">
                    <button style="background-image: url(''); "
                            onclick="addProduct(7,20)" title="巡游卡"></button>
                    <div class="c3" id="count7">0</div>
                </div>
            </td>

            <td>
                <div class="c5">
                    <button style="background-image: url(''); "
                            onclick="addProduct(8,6)" title="6级普通卡"></button>
                    <div class="c3" id="count8">0</div>
                </div>
            </td>

            <td>
                <div class="c5">
                    <button style="background-image: url(''); "
                            onclick="addProduct(9,30)" title="75图册"></button>
                    <div class="c3" id="count9">0</div>
                </div>
            </td>
            <td>
                <div class="c5">
                    <button style="background-image: url(''); "
                            onclick="addProduct(10,10)" title="三界悬赏令"></button>
                    <div class="c3" id="count10">0</div>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div class="c5">
                    <button style="background-image: url(''); "
                            onclick="addProduct(11,75)" title="灵符卡"></button>
                    <div class="c3" id="count11">0</div>
                </div>
            </td>
            <td>
                <div class="c5">
                    <button style="background-image: url(''); "
                            onclick="addProduct(12,80)" title="灵鹤卡"></button>
                    <div class="c3" id="count12">0</div>
                </div>
            </td>

            <td>
                <div class="c5">
                    <button style="background-image: url(''); "
                            onclick="addProduct(13,85)" title="火车卡"></button>
                    <div class="c3" id="count13">0</div>
                </div>
            </td>

            <td>
                <div class="c5">
                    <button style="background-image: url(''); "
                            onclick="addProduct(14,45)" title="幽灵卡"></button>
                    <div class="c3" id="count14">0</div>
                </div>
            </td>
            <td>
                <div class="c5">
                    <button style="background-image: url(''); "
                            onclick="addProduct(15,65)" title="红萼卡"></button>
                    <div class="c3" id="count15">0</div>
                </div>
            </td>
        </tr>

    </table>

</div>


<!-- 总价 -->
<div id="totalDisplay" class="c2">
    <table>
        <tr><td><h3 id="items">当日总个数：0 个</h3></td></tr>
        <tr><td><h3 id="allPrice">当日总收益：0 万</h3></td></tr>
    </table>
</div>


</body>
</html>